<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="LINK_EDIT.RULES">

      <a-form-item label="链接标题(分享标题)" field="title">
        <a-input v-model="formState.title" allow-clear placeholder="请填活动链接标题"/>
      </a-form-item>

      <a-form-item label="链接地址(分享地址)" field="url">
        <a-input v-model="formState.url" allow-clear placeholder="链接地址(以http(s)://开头)"/>
      </a-form-item>


      <a-form-item label="链接描述(分享描述)" field="description">
        <a-textarea v-model="formState.description" :max-length="200"/>
      </a-form-item>

      <a-form-item label="备注说明" field="remark">
        <a-textarea v-model="formState.remark"  :max-length="200"/>
      </a-form-item>


      <a-form-item label="分享缩略图" field="thumb">
        <smart-upload-image v-model="formState.thumb" :limit="1"/>
      </a-form-item>


    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {EditDrawer} from '@/libs/core'

import {LINK_EDIT} from "../resource/form";
import {PopBasicHttp} from '../resource/http'

import {ref} from "vue";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addLink, updateLink} = PopBasicHttp
const config = {tplRecord: LINK_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}
const dateRange = ref([])

const service = new EditDrawer(config).setAddRequest(addLink).setUpdateRequest(updateLink)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改活动链接' : '新建活动链接'
</script>
